<template>
  <div class="cartControl">
    <transition name="fade">
        <div class="cart-decrease" @click.stop.prevent="decreaseCart($event)" v-show="food.count > 0">
          <transition name="inner">
          <span class="inner iconfont icon-jian">
            <img src="../img/minus-circle.png">
          </span>
          </transition>
        </div>
    </transition>
     <span class="cart-count" v-show="food.count > 0">
       {{food.count}}
    </span>
    <span class="iconfont icon-jia cart-add" @click.stop.prevent="addCart($event)">
      <img src="../img/add.png">
    </span>
  </div>
</template>

<script type="text/ecmascript-6">
  import Vue from 'vue';
  export default {
    props:['food','item_cart_list','item_cart_num','cart_list_ids'],

    data(){
      return{
        emit_status:0,
      }
    },
    methods: {
      addCart(event) {
        /*this.item_cart_num =  this.item_cart_num + 1;*/

        /*if (!event._constructed) {
          // 去掉自带click事件的点击
          return;
        }*/
        if (!this.food.count) {
          Vue.set(this.food, 'count', 1);
        } else {
          Vue.set(this.food, 'count', this.food.count++);
        }
        if(this.item_cart_list.length >0){
          for (var i in this.item_cart_list) {
            var obj = this.item_cart_list[i];
            if (this.cart_list_ids.indexOf(this.food.id)) {
              obj.count = this.food.count
            } else {
              this.cart_list_ids+=','+this.food.id;
              this.item_cart_list.push(this.food);
            }
          }
        }else {
          this.cart_list_ids+=','+this.food.id;
          this.item_cart_list.push(this.food)
        }

//        event.srcElement.outerHTML
        this.emit_status++;
      },
      decreaseCart(event) {
        if (!event._constructed) {
          // 去掉自带click事件的点击
          return;
        }
       /* this.food.count--;*/
      }
    },
    watch:{
      emit_status:{
        handler(curVal,oldVal){
          this.setCache('itemCartList', JSON.stringify(this.item_cart_list))
          // localStorage.setItem('itemCartList', JSON.stringify(this.item_cart_list));
          this.$emit('childByValue', this.item_cart_list); // 子组件通过 $emit触发父组件的方法 increment   还
        },
        deep:true
      },
    }
  };
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import "../css/cartControl.css"
 /* @import "cartControl.styl";*/
</style>
